<template>
  <h2>toRef</h2>
  <h3>state:{{ state }}</h3>
  <h3>age:{{ age }}</h3>
  <h3>money:{{ money }}</h3>
  <button @click="update">更新数据</button>
  <hr>
  <child :age="age"></child>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRef, ref } from "vue";
import Child from "./components/Child.vue";
export default defineComponent({
  components: { Child },
  name: "App",
  setup() {
    const state = reactive({
      age: 5,
      money: 100,
    });
    //把响应式数据state对象中的某个属性age变成ref对象
    const age = toRef(state, "age");
    //把响应式对象中的某个属性使用ref进行包装，变成了一个ref对象
    const money = ref(state.money);
    console.log(age, money);
    const update = () => {
      //更新数据
      state.age += 2;//age和age+2
      age.value +=3;//age和age+3
      //上面的操作会使state中的age和age+5，这两个相互影响

      state.money += 2;//只有state中的money会+2,money不会
      money.value +=3;//只有money会+3，state中的money不会
    };
    return {
      state,
      age,
      money,
      update,
    };
  },
});
</script>
